<template>
	<!-- <view class="open-gift"> -->
		<!-- <view class="header">
			<view class="title">开通礼包</view>
			<view class="subtitle">更多</view>
		</view> -->
		<!-- <view class="row" v-for="(item,index) in list" :key="index">
			<view class="grid" @tap="openMember">
				<image :src="item.image"></image>
				<view class="title">
					<view>{{item.title}}</view>
					<view class="number">x{{item.num}}</view>
				</view>
			</view>
		</view> -->
		<view class="interests-box">
			<view class="interests-tit">
				- 会员8大权益 -
			</view>
			<view class="interests-con-box">
				<view class="interests-item" v-for="(v,i) in list " :key="i">
					<view class="interests-item-image">
						<image :src="v.image" mode=""></image>
					</view>
					<view class="interests-item-tit">
						{{v.title}}
					</view>
					<view class="number">x{{v.num}}</view>
				</view>
			</view>
		</view>
	<!-- </view> -->
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						title: '赠送券',
						image: '../../../static/Mine/daifukuan.png',
						num:1,
					},
					{
						title: '买一赠一券',
						image: '../../../static/Mine/daifahuo.png',
						num:2,
					},
					{
						title: '买二赠一券',
						image: '../../../static/Mine/daishouhuo.png',
						num:1,
					},
					{
						title: '其他',
						image: '../../../static/Mine/icon-receive.png',
						num:1,
					},
					{
						title: '优先券',
						image: '../../../static/Mine/icon-receive.png',
						num:6,
					},
					{
						title: '免运费券',
						image: '../../../static/Mine/icon-receive.png',
						num:10,
					},
					{
						title: '免运费券',
						image: '../../../static/Mine/icon-receive.png',
						num:10,
					},
					{
						title: '免运费券',
						image: '../../../static/Mine/icon-receive.png',
						num:10,
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.interests-box {
		width: 100%;
		margin-bottom: 20rpx;
		.interests-tit {
			width: 100%;
			display: flex;
			justify-content: center;
			font-size: 36rpx;
			font-weight: bolder;
			margin: 40rpx 0;
		}
		.interests-con-box {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;
			.interests-item {
				width: 25%;
				height: 160rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 30rpx;
				.interests-item-image {
					width: 108rpx;
					height: 108rpx;
					// border-radius: 50%;
					image {
						width: 100%;
						height: 100%;
						// border-radius: 50%;
					}
				}
				.interests-item-tit {
					margin-top: 20rpx;
					font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
					font-size: 28rpx;
					color: #989A9C;
				}
				.number {
					margin-left: 5rpx;
					font-family: 'neutra';
					color: #DD524D;
				}
			}
		}
	}
.open-gift {
	width: 100%;
	background-color: #ffffff;
	padding: 30rpx 40rpx;
	margin-bottom: 20rpx;
	
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.title {
			font-size: 32rpx;
			font-weight: 500;
		}
		
		.subtitle {
			font-size: 24rpx;
			color: #666
		}
	}
	
	.row {
		display: flex;
		// flex-wrap: wrap;
		
		.grid {
			// width: 33.3333%;
			display: block;
			float: right;
			flex-direction: column;
			align-items: center;
			// padding: 20rpx;
			justify-content:space-around ;
			
			image {
				width: 70rpx;
				height: 70rpx;
				margin-bottom: 20rpx;
			}
			
			.title {
				font-size: 24rpx;
				color:#343434;
				display: flex;
				align-items: baseline;
				
				.number {
					margin-left: 5rpx;
					font-family: 'neutra';
					color: #DD524D;
				}
			}
		}
	}
}
</style>
